import { Tabs } from 'antd';
import { Modal } from 'antd/lib';
import { autorun, toJS } from 'mobx';
import { useEffect, useState } from 'react';
import GoodsDetail from './GoodsDetail/GoodsDetail';
import styles from "./goodsDetailModal.module.less";
import { get } from 'lodash';
import { GoodsData } from '#/type';
import EditorTable from './EditorTable/EditorTable';
import goodsDetailModalStore from './goodsDetailModalStore';

// 商品详情
export default function GoodsDetailModal() {

  const [open, setOpen] = useState(goodsDetailModalStore.open);
  const [goodsData, setGoodsData] = useState(goodsDetailModalStore.goodsData);

  useEffect(() => autorun(() => {
    setOpen(goodsDetailModalStore.open);
    setGoodsData(goodsDetailModalStore.goodsData);
  }, { delay: 10 }), [])

  const items = [
    {
      label: '产品详情',
      key: 'detail',
      children: <GoodsDetail goodsData={goodsData} />,
    },
    {
      label: '尺码说明',
      key: 'sizeIntro',
      children: <EditorTable
        key={goodsData && goodsData.id}
        columns={get(goodsData, ["size_info", "columns"]) || []}
        dataSource={get(goodsData, ["size_info", "dataSource"]) || []}
      />,
    },
  ]

  return (
    <Modal
      width={900}
      title={goodsData && goodsData.name}
      open={open}
      footer={null}
      onCancel={() => {
        goodsDetailModalStore.setGoodsData(undefined);
      }}
      maskClosable={false}
      centered={true}
      destroyOnClose={true}
    >
      <div className={styles.goodsDetailModal}>
        <Tabs
          className={styles.tabs}
          type="card"
          items={items}
        />
      </div>
    </Modal>
  )
}
